<template>
  <div class="full-dig fullscreen" id="content">
    <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="当前课程已结束,请关闭页面"></div>
    <!-- 画板 -->
    <Sketchpad v-if="isSketchpad" @noShowPencil="isSketchpad = false"></Sketchpad>
    <div class="optMenu" v-if="isLeft == true">
      <div class="bt-tit" v-if="bclass">{{ bclass.title }}</div>
      <p v-if="bclass">{{ bclass.cat_name }}</p>
      <p v-if="bclass">{{ bclass.class_name_text }}</p>
      <ul class="menuCourseList">
        <li :class="{ cur: currentCourse.id == item.id }" v-for="item in courseList" :key="'cur_'+item.id "
          @click="openCourse(item)">
          <img :src="item.image_cover" />
          <div class="course-name">{{ item.bname }}</div>
        </li>
      </ul>
      <div class="item-r" @ @click="isLeft = false" v-if="isLeft"></div>
      <!-- <div class="arrow-l"   v-if="isLeft" @click="isLeft = false"></div> -->
    </div>
    <div class="cont course-box" :class="[getFileType(currentCourse.file) == 'excel' ? 'course-bg' : '']">
      <div class="course-con" v-if="currentCourse">
        <!-- 视频音频 -->
        <div id="course-player" :style="styleFitWin" v-if="getFileType(currentCourse.file) == 'video'"></div>
        <div v-else-if="getFileType(currentCourse.file) == 'radio'">
          <div class="" :style="styleFitWin">
            <div class="item-viewRadio" :style="{ 'background-image': 'url(' + bgImg + ')' }">
              <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                style="width: 372px;min-height: 372px;" />
              <div class="item-read" v-else>
                <div v-for="(item, index) in read" :key="index" class="item-all">
                  <span v-if="index + 1 < read.length">
                    <span
                      :class="[currentTxt > read[index].time - 1 && currentTxt < read[index + 1].time ? 'item-color' : '']">{{ item.text }}</span>
                  </span>
                </div>
              </div>
              <audio @ended="stopMusic()" @pause="stopMusic()" @play="playMusic()" id="audio" class="item-viewAudio"
                @timeupdate="update" :src="music" controls="controls" controlsList="nodownload">
                Your browser does not support the audio element.
              </audio>
            </div>
          </div>
        </div>
        <!-- office文件 -->
        <iframe :style="styleFitWin2" class="course-iframe"
          :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentCourse.file" v-else-if="
            getFileType(currentCourse.file) == 'excel' ||
              getFileType(currentCourse.file) == 'word' ||
              getFileType(currentCourse.file) == 'pdf' ||
              getFileType(currentCourse.file) == 'ppt'
          "></iframe>
        <!-- 图片 -->
        <div v-else-if="getFileType(currentCourse.file) == 'image'">
          <div class="item-lun">
            <el-carousel height="100vh" indicator-position="outside" :interval="100000"
              v-if="currentCourse.file.split(';').length > 1">
              <el-carousel-item v-for="(item, index) in currentCourse.file.split(';')" :key="index"><img :src="item" />
              </el-carousel-item>
            </el-carousel>
            <img :src="currentCourse.file" v-if="currentCourse.file.split(';').length == 1" />
          </div>
        </div>
        <!--    <div v-else-if="getFileType(currentCourse.file) == 'image'"><img :src="currentCourse.file" :style="styleFitWin" /></div> -->
        <template v-else-if="getFileType(currentCourse.file) == 'html'">
          <iframe :style="styleFitWin2" :src="currentCourse.file"></iframe>
        </template>
        <!-- <div v-else-if="getFileType(currentCourse.file) == 'html'" class="course-iframe"><iframe style="width: 100%;height: 100%;" :src="currentCourse.file"></iframe></div> -->
        <!-- swf文件 -->
        <template style="margin-top: -100px;" v-else-if="getFileType(currentCourse.file) == 'swf'">
          <object :data="currentCourse.file" type="application/x-shockwave-flash" :style="styleFitWin">
            <param name="movie" value="demo.swf" style="width: 100%;height:100vh;" />
            <embed :src="currentCourse.file" style="width:100%;height: 100vh;" />
          </object>
        </template>
      </div>

      <div class="arrow-r" @click="
          isLeft = true;
          isRight = false;
        "></div>
    </div>
    <div class="arrow-l arrow-l-top" @click="ShowBar" v-if="isShowBar"></div>
    <div class="arrow-l arrow-l-right" @click="ShowBar" v-else></div>
    <!-- <span @click="" class="a_l"  v-if="isShowBar == false"><img src="static/img/a_l.png" /></span>
    <span @click="courseBefore()" class="a_r"  v-if="isShowBar == false"><img src="static/img/a_r.png" /></span> -->

    <span @click="courseBefore()" class="a_l" v-if="isShowBar == false"><img src="static/img/a_l.png" /></span>
    <span @click="courseNext()" class="a_r" v-if="isShowBar == false"><img src="static/img/a_r.png" /></span>
    <!-- 右边栏 -->
    <div class="optArea" v-if="isShowBar == true">
      <span @click="goHome()"><img src="static/img/f1.png" /></span>
      <span @click="
          isDm = !isDm;
          isSketchpad = false;
          isCd = false;
          isTime = false;
          getStudentInfo();
        ">
        <img src="static/img/f2.png" />
      </span>
      <span @click="
          isDm = false;
          isSketchpad = !isSketchpad;
          isCd = false;
          isTime = false;
          getDraw();
        ">
        <img src="static/img/f3.png" />
      </span>
      <!-- TODO -->
      <span @click="changeImage()"><img src="static/img/f4.png" /></span>
      <span @click="
          isDm = false;
          isSketchpad = false;
          isCd = false;
          isTime = !isTime;
          getCount();
        ">
        <img src="static/img/f5.png" />
      </span>
      <span>
        <img src="static/img/f6.png" v-if="!isFullScreen" @click="getFullScreen()" />
        <img src="static/img/f6-2.png" v-else @click="getExitFull()" />
      </span>
      <span @click="courseNext()"><img src="static/img/f7.png" /></span>
      <span @click="courseBefore()"><img src="static/img/f8.png" /></span>
      <span @click="Close()"><img src="static/img/f9.png" /></span>
    </div>
    <!-- 出勤弹出层 -->
    <div class="commDig dm-area" v-if="isDm == true">
      <div class="title">
        <span>出勤</span>
        <span class="closed" @click="isDm = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont" style="height: 450px;">
        <div class="left_arr" @click="
            initCq = true;
            studentBefore();
          "></div>
        <div class="right_arr" @click="
            initCq = true;
            studentNext();
          "></div>
        <div class="xsmd" @click="
            isKq = true;
            getStudentLogInfo();
          ">
          学生名单
        </div>
        <div class="yjqq" @click="oneCheck()">一键全勤</div>

        <p class="num-all">本班共{{ studentList.length }}个学生</p>

        <div class="name" v-if="currentCqStudent">{{ currentCqStudent.name }}</div>
        <div class="kq">
          <button :class="initCq ? 'cq' : 'cq-before'" @click="initCq = !initCq">出勤</button>
          <button :class="!initCq ? 'qq' : 'qq-before'" @click="initCq = !initCq">缺勤</button>
        </div>
      </div>

      <div class="mt30 baseAct width100"><button @click="confirmKq()" class="sure">确定</button></div>
    </div>
    <!-- 学生名单弹出层 -->
    <div class="commDig kq-area" v-if="isKq == true">
      <div class="title">
        <span>学生名单</span>
        <span class="closed" @click="isKq = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <p class="type-name">
          <span class="kq-typ1"></span>
          出勤
          <span class="kq-typ2"></span>
          缺勤
          <span class="kq-typ3"></span>
          未点名
        </p>

        <div class="namelist">
          <template v-for="(item, index) in studentLogList">
            <a class="tag1" v-if="item.status == 1">{{ item.name }}</a>
            <a class="tag2" v-if="item.status == 2">{{ item.name }}</a>
            <a class="tag3" v-if="item.status == 3">{{ item.name }}</a>
          </template>
        </div>
      </div>
      <div class="mt30 baseAct width100"><button class="sure" @click="isKq = false">点名</button></div>
    </div>
    <!-- 抽答弹出层-->
    <count-down ref="countDown" v-if="isTime == true" @colosCountDown="isTime = false"></count-down>
    <div class="commDig chouda" v-if="isCd == true">
      <div class="title">
        <span>抽答</span>
        <span class="closed" @click="isCd = false;"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont" v-if="isCdPlay2 == false">
        <img src="static/img/go.png" v-if="isCdPlay == false" @click="goChange()" class="go-cd" />
        <img src="static/img/go.gif" v-if="isCdPlay == true" @click="
            isCdPlay2 = true;
            confirmAnswer();
          " class="go-cd " />
      </div>
      <div class="cont" v-if="isCdPlay2 == true">
        <p class="stuname" style="padding-top: 0px;" v-if="randomStudent">{{ randomStudent.name }}</p>
        <div class="item-zan" v-if="randomStudent">
          <img src="../../../static/img/dianzan.png" style="cursor: pointer;" v-if="isZan == false"
            @click="changeZan()" />
          <img src="../../../static/img/dianzan1.png" v-else />
          <audio v-if="isPlay" id="audio" class="item-changeAudio" src="../../../static/img/good.mp3"
            controlsList="nodownload" autoplay="true"></audio>
        </div>
        <div class="mt30 baseAct width100"><button @click="again()" class="sure mt30">再抽一次</button></div>
      </div>
    </div>
  </div>
</template>
<script>
  var player;
  import Header from '../../components/header.vue';
  import Sketchpad from '../../components/Sketchpad.vue';
  import CountDown from '../../components/countdown2';
  export default {
    name: 'courseViewList',
    data() {
      return {
        isPlay: false,
        isZan: false, //是否点赞
        isShowBar: true,
        isRight: true,
        isLeft: false,
        isKq: false,
        isCd: false,
        isCdPlay: false,
        isCdPlay2: false,
        isTime: false,
        isDm: false,
        courseList: [],
        currentCourse: {},
        currentZiyuan: {},
        isSketchpad: false,
        bclass: {},
        studentList: [],
        studentLogList: [],
        initCq: true,
        currentCqStudent: {},
        randomStudent: {},
        isFullScreen: false,
        music: '',
        isPlayMusic: false,
        activeClass: 'playM',
        errorClass: 'stopM',
        log_id: '',
        stulog_id: '',
        logid: '',
        loading: '',
        timer: '',
        styleFitWin: {
          position: 'fixed',
          height: (document.documentElement.clientHeight || document.body.clientHeight) + 16 + 'px ',
          width: ((document.documentElement.clientHeight || document.body.clientHeight) + 16) * 1.777777777777777 +
            'px ',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%,-50%)',
          background: 'no-repeat center center',
          backgroundSize: 'cover',
          margin: '0'
        },
        styleFitWin2: {
          position: 'fixed',
          height: (document.documentElement.clientHeight || document.body.clientHeight) + 16 + 'px ',
          width: ((document.documentElement.clientHeight || document.body.clientHeight) + 16) * 1.777777777777777 +
            'px ',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%,-50%)',
          background: 'no-repeat center center',
          backgroundSize: 'cover'
        },
        fullscreenLoading: false,
        currentTxt: 0, //当前歌词所在位置
        array: [], //全部歌词
        indexArray: 0, //监听高亮歌词显示
        read: [], //截取的要显示的歌词
        showImg: true, //没有歌词显示转动图片，
        bgImg: '../../../static/img/music-bg.jpg', //轮播背景图
        bgTimer: '',
        bgAllImg: ['../../../static/img/music-bg.jpg'], //当前播放歌曲轮播的背景图片
        flag: 0, //防止定时器多次执行
        imgNum: 0, //轮播图第几张
        changeTimer: '' //抽答学生定时器
      };
    },
    watch: {
      //监听时间变化
      currentTxt(newv) {
        if (newv > 1) {
          var ret = this.array.findIndex((value, index, arr) => {
            return value.time == newv;
          });
          if (ret != -1) {
            this.indexArray = ret;
          }
          this.read = this.array.slice(this.indexArray - 1, this.indexArray + 10);
        }
      }
    },
    // activated() {
    //   // isUseCache为false时才重新刷新获取数据
    //   // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的
    //   if (!this.$route.meta.isUseCache) {
    //     this.init();
    //   }
    //   this.$route.meta.isUseCache = false;
    // },
    // // 列表页面的beforeRouteLeave钩子函数
    mounted() {
      if (window.name == '') {
        //console.log('首次被加载');

        // 在首次进入页面时我们给window.name设置一个固定值(isRefresh)
        window.name = 'isRefresh';
      } else if (window.name == 'isRefresh') {
        //console.log('页面被刷新');
      }

      window.onresize = () => {
        return (() => {
          this.styleFitWin = {
            position: 'fixed',
            height: (document.documentElement.clientHeight || document.body.clientHeight) + 16 + 'px ',
            width: ((document.documentElement.clientHeight || document.body.clientHeight) + 16) *
              1.777777777777777 + 'px ',
            top: '50% !important',
            left: '50% !important',
            transform: 'translate(-50%,-50%)',
            background: 'no-repeat center center',
          };
          this.styleFitWin2 = {
            position: 'fixed',
            height: (document.documentElement.clientHeight || document.body.clientHeight) + 16 + 'px ',
            width: ((document.documentElement.clientHeight || document.body.clientHeight) + 16) *
              1.777777777777777 + 'px ',
            top: '50% !important',
            left: '50% !important',
            transform: 'translate(-50%,-50%)',
            background: 'no-repeat center center'
          };
        })();
      };
      this.styleFitWin = {
        position: 'fixed',
        height: (document.documentElement.clientHeight || document.body.clientHeight) + 16 + 'px ',
        width: ((document.documentElement.clientHeight || document.body.clientHeight) + 16) * 1.777777777777777 +
          'px ',
        top: '50% !important',
        left: '50% !important',
        transform: 'translate(-50%,-50%)',
        background: 'no-repeat center center',
      };
      this.styleFitWin2 = {
        position: 'fixed',
        height: (document.documentElement.clientHeight || document.body.clientHeight) + 16 + 'px ',
        width: ((document.documentElement.clientHeight || document.body.clientHeight) + 16) * 1.777777777777777 +
          'px ',
        top: '50% !important',
        left: '50% !important',
        transform: 'translate(-50%,-50%)',
        background: 'no-repeat center center'
      };
    },
    created() {
      this.init();
      // localStorage.pagehide = false;
      // //console.log(this.$router.query);
    },
    beforeDestroy() {
      //console.log('before');
      clearInterval(this.timer);
      let form = {
        log_id: this.log_id,
        token: localStorage.getItem('token')
      };
      this.$api('grades.endClass', form).then(res => {});
      clearInterval(this.bgTimer);
      this.bgTimer = null;
      this.flag = 0;
    },
    methods: {
      getClose() {
        clearInterval(this.bgTimer);
        this.bgTimer = null;
        this.flag = 0;
      },
      getCount() {
        let form = {
          log_id: this.log_id,
          token: localStorage.getItem('token')
        };
        this.$api('grades.countdownlog', form).then(res => {});
      },
      changeZan() {
        this.isZan = true;
        this.isPlay = true;
        let form = {
          stulog_id: this.stulog_id,
          token: localStorage.getItem('token')
        };
        this.$api('grades.randStastu', form).then(res => {});
        setTimeout(() => {
          this.isPlay = false;
        }, 3000);
      },
      //首次抽答学生
      goChange() {
        this.isCdPlay = true
        this.changeTimer = setTimeout(() => {
          this.confirmAnswer()
        }, 3000)

      },
      again() {
        this.isCdPlay2 = false;
        this.isZan = false;
        this.isPlay = false;
        this.changeTimer = setTimeout(() => {
          this.confirmAnswer()
        }, 3000)
      },
      playMusic() {
        this.isPlayMusic = true;
        //背景开始轮播
        clearInterval(this.bgTimer);
        this.playBg();
      },
      stopMusic() {
        //console.log('stopMusic');
        //背景停止轮播
        clearInterval(this.bgTimer);
        this.isPlayMusic = false;
      },

      async changeImage() {
        let formData = {
          grades_id: this.bclass.class_ids,
          token: localStorage.getItem('token'),
          log_id: this.log_id
        };
        let res = await this.$api('student.studentLogList', formData);
        if (res.data.length == 0) {
          this.$message('该班级中暂无学生');
          return;
        }
        this.isDm = false;
        this.isSketchpad = false;
        this.isCd = !this.isCd;
        this.isTime = false;
      },
      async init() {
        let formData = {
          bid: this.$route.query.bid,
          grades_id: this.$route.query.grades_id,
          token: localStorage.getItem('token'),
          log_id: this.$route.query.log_id
        };
        let res = await this.$api('resources.beikelist', formData);
        this.courseList = res.data.resource_list;
        this.bclass = res.data.bclass;
        this.log_id = res.data.log_id;
        this.$nextTick(() => {
          if (this.courseList.length > 0) {
            this.openCourse(this.courseList[0]);
          }
        });
        var flag = 0;
        this.timer = setInterval(() => {
          this.flag = 1;
          this.$api('index.checkAttclassStatsu', {
            token: this.token,
            log_id: this.log_id
          }).then(res => {
            if (res.code == 0) {
              //console.log(111);
              this.fullscreenLoading = true;
              this.$message('上课已结束');
              clearInterval(this.timer);
              //console.log(this.fullscreenLoading);
              this.$router.go(-1);
            }
          });
        }, 1000);
      },
      //获取当前音频播放时间
      update() {
        var audio = document.querySelector('audio');
        if (audio != null) {
          this.currentTxt = parseInt(audio.currentTime);
        }
      },
      // 打开课程
      openCourse(item) {
        clearInterval(this.bgTimer);
        this.bgTimer = null;
        this.flag = 0;
        this.imgNum = 1;
        this.currentCourse = item;
        this.currentZiyuan = item;
        this.isPlayMusic = false;
        //console.log(item.file);
        //console.log(this.getFileType(item.file));
        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file);
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file;

          //是否有歌词，有歌词进行处理
          if (item.lyric_text != '' && item.lyric_text != undefined) {
            this.array = [];
            this.showImg = false;
            let lyricArr = item.lyric_text.split('[').slice(1); // 先以[进行分割
            let lrcObj = {};
            lyricArr.forEach(item => {
              var data = {};
              let arr = item.split(']'); // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0]);
              let s = parseInt(arr[0].split(':')[1]);
              arr[0] = m * 60 + s;
              data.time = arr[0];
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1];
                data.text = arr[1];
              }
              this.array.push(data);
            });

            this.read = this.array.slice(0, this.indexArray + 10);
            //console.log(this.read);
          } else {
            this.showImg = true;
          }
          if (item.rotation_img_text != '' && item.rotation_img_text != undefined) {
            //console.log(item.rotation_img_text);
            this.bgAllImg = item.rotation_img_text;
            this.bgImg = this.bgAllImg[0];
            this.showImg = false;
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg';
            this.bgAllImg = [];
            clearInterval(this.bgTimer);
            this.flag = 0;
          }
          if (this.flag == 1) {
            return;
          }
          //播放背景
          this.playBg();
        }
      },

      playBg() {
        if (this.bgAllImg.length > 1) {
          this.bgTimer = setInterval(() => {
            this.flag = 1;
            this.bgImg = this.bgAllImg[this.imgNum];
            if (this.imgNum == this.bgAllImg.length - 1) {
              this.imgNum = -1;
            }
            this.imgNum++;
          }, this.currentZiyuan.rotation_times || 10000);
        } else {
          clearInterval(this.bgTimer);
        }
      },

      // 阿里云视频播放
      aliplay(file) {
        //console.log('aliy');
        if (player) {
          player.dispose();
        }
        const saveTime = function (memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime);
        };

        const getTime = function (memoryVideo) {
          return localStorage.getItem(memoryVideo);
        };
        this.$nextTick(() => {
          player = new Aliplayer({
              id: 'course-player',
              source: file,
              width: '100%',
              height: '100%',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime]
              }],
              skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
            },
            function (player) {
              //console.log('The player is created');
            }
          );
        });
      },
      // 学生名单
      async getStudentInfo() {
        let formData = {
          grades_id: this.bclass.class_ids,
          token: localStorage.getItem('token'),
          log_id: this.log_id
        };
        let res = await this.$api('student.studentList', formData);
        this.studentList = res.data;
        if (this.studentList.length > 0) {
          this.currentCqStudent = this.studentList[0];
        }
      },
      getDraw() {
        //console.log(this.isSketchpad);
        if (this.isSketchpad == true) {
          let form = {
            log_id: this.log_id,
            token: localStorage.getItem('token')
          };
          this.$api('grades.drawlog', form).then(res => {});
        }
      },
      async getStudentLogInfo() {
        let formData = {
          grades_id: this.bclass.class_ids,
          token: localStorage.getItem('token'),
          log_id: this.log_id
        };
        let res = await this.$api('student.studentLogList', formData);
        if (res.data.length == 0) {
          this.$message('该班级中暂无学生');
        }
        this.studentLogList = res.data;
      },
      countDownS_cb: function (x) {
        //console.log(x);
      },
      countDownE_cb: function (x) {
        //console.log(x);
      },
      Close() {
        if (this.isFullScreen == true) {
          this.getExitFull();
          this.isShowBar = true;
          return;
        }
        this.$confirm('是否结束授课?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            let form = {
              log_id: this.log_id,
              token: localStorage.getItem('token')
            };
            this.$api('grades.endClass', form).then(res => {
              clearInterval(this.timer);
              this.fullscreenLoading = false;
              this.$router.replace('/bkblist');
            });
          })
          .catch(() => {});
      },
      goHome() {

        this.$confirm('打开新窗口，可随时返回课程', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            let newpage = this.$router.resolve({
              name: '#' + localStorage.getItem('jump_path')
            });
            window.open(newpage.location.name, '_blank');
          })
          .catch(() => {

          });

        // this.$message.info('打开新窗口，可随时返回课程');
        // let form = { log_id: this.log_id, token: localStorage.getItem('token') };
        // this.$api('grades.endClass', form).then(res => {});

      },
      // 一键全勤
      async oneCheck() {
        if (this.studentList.length == 0) {
          this.$message('该班级中暂无学生');
          return;
        }
        let formData = {
          grades_id: this.bclass.class_ids,
          token: localStorage.getItem('token'),
          log_id: this.log_id
        };
        let res = await this.$api('student.oneCheck', formData);
        this.$message(res.msg);
      },
      // 下一个课件
      courseNext() {
        for (let index = 0; index < this.courseList.length; index++) {
          if (this.currentCourse.id == this.courseList[index].id) {
            if (index == this.courseList.length - 1) {
              this.$message('已经是最后一张了');
              return;
            } else {
              this.openCourse(this.courseList[index + 1]);
              return;
            }
          }
        }
      },
      // 前一个课件
      courseBefore() {
        for (let index = this.courseList.length - 1; index > -1; index--) {
          if (this.currentCourse.id == this.courseList[index].id) {
            if (index == 0) {
              this.$message('已经是第一张了');
              return;
            } else {
              this.openCourse(this.courseList[index - 1]);
              return;
            }
          }
        }
      },
      // 下一个学生
      studentNext() {
        for (let index = 0; index < this.studentList.length; index++) {
          if (this.currentCqStudent.id == this.studentList[index].id) {
            if (index == this.studentList.length - 1) {
              this.$message('已经是最后一个学生了');
              return;
            } else {
              this.currentCqStudent = this.studentList[index + 1];
              return;
            }
          }
        }
      },
      // 上一个学生
      studentBefore() {
        for (let index = this.studentList.length - 1; index > -1; index--) {
          if (this.currentCqStudent.id == this.studentList[index].id) {
            if (index == 0) {
              this.$message('已经是第一个学生了');
              return;
            } else {
              this.currentCqStudent = this.studentList[index - 1];
              return;
            }
          }
        }
      },
      // 确定出勤
      async confirmKq() {
        let formData = {
          status: this.initCq ? 1 : 2,
          student_id: this.currentCqStudent.id,
          token: localStorage.getItem('token'),
          log_id: this.log_id
        };

        if (formData.student_id == undefined) {
          this.$message('该班级中暂无学生');
          return;
        }
        let res = await this.$api('student.editStudentLog', formData);
        this.$message(res.msg);
      },
      async confirmAnswer() {
        //console.log("结果")
        clearTimeout(this.changeTimer)
        this.changeTimer = ''
        this.isCdPlay = true;
        this.isCdPlay2 = true;
        this.randomStudent = '';
        this.stulog_id = '';
        let formData = {
          grades_id: this.bclass.class_ids,
          token: localStorage.getItem('token'),
          log_id: this.log_id
        };
        let res = await this.$api('student.Random', formData);
        this.randomStudent = res.data;
        this.stulog_id = res.data.log_id;
      },
      getFileType(fileName) {
        // 后缀获取
        let suffix = '';
        // 获取类型结果
        let result = '';
        try {
          const flieArr = fileName.split('.');
          suffix = flieArr[flieArr.length - 1];
        } catch (err) {
          suffix = '';
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false;
        }
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return 'image';
        }
        // 匹配txt
        const txtlist = ['txt'];
        result = txtlist.find(item => item === suffix);
        if (result) {
          return 'txt';
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx'];
        result = excelist.find(item => item === suffix);
        if (result) {
          return 'excel';
        }
        // 匹配 word
        const wordlist = ['doc', 'docx'];
        result = wordlist.find(item => item === suffix);
        if (result) {
          return 'word';
        }
        // 匹配 pdf
        const pdflist = ['pdf'];
        result = pdflist.find(item => item === suffix);
        if (result) {
          return 'pdf';
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx'];
        result = pptlist.find(item => item === suffix);
        if (result) {
          return 'ppt';
        }
        // 匹配 视频
        const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
        result = videolist.find(item => item === suffix);
        if (result) {
          return 'video';
        }
        // 匹配 音频
        const radiolist = ['mp3', 'wav', 'wmv'];
        result = radiolist.find(item => item === suffix);
        if (result) {
          return 'radio';
        }
        // 匹配 swf
        const swflist = ['swf'];
        result = swflist.find(item => item === suffix);
        if (result) {
          return 'swf';
        }
        //匹配html
        const htmllist = ['html'];
        result = htmllist.find(item => item === suffix);
        if (result) {
          return 'html';
        }
        // 其他 文件类型
        return 'other';
        //console.log(fileName);
      },

      ShowBar() {
        this.isShowBar = !this.isShowBar;
      },
      // 全屏
      getFullScreen() {
        //console.log("全屏")
        //console.log(this.styleFitWin)
        this.styleFitWin.margin = '0'
        let docElm = document.getElementById('body');
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        } //IE11
        else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
        this.isFullScreen = !this.isFullScreen;
        this.isShowBar = !this.isShowBar;
      },
      getExitFull() {
        //console.log('退出')
        //console.log(this.styleFitWin)
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.isFullScreen = !this.isFullScreen;
        this.isShowBar = !this.isShowBar;
      }
    },
    components: {
      Header,
      Sketchpad,
      CountDown
    }
  };

</script>

<style lang="scss" scoped>
  #audioArea {
    background: #595959 !important;
  }

  .full-dig {
    background-color: rgba(255, 0, 0, 0) !important;
  }

  .course-box {
    background-color: #666;

    .course-con {
      width: 1400px;
      margin: auto;
      height: 100vh;
    }

    .course-iframe {
      width: 100%;
      height: 100%;
      margin: -8px;
      background-color: #ffffff;
    }
  }

  .course-bg {
    background-color: #ffffff;
  }

  .cur {
    display: flex;
    cursor: pointer;

    &.active {
      background-color: #d8f7f0 !important;
      border-right: 4px solid #59e3bf;
    }

    .course-name {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis; //文本溢出显示省略号
      white-space: nowrap; //文本不会换行
    }
  }

  .xsmd,
  .yjqq {
    cursor: pointer;
  }

  .kq-area {
    z-index: 10;
  }

  .cq-before {
    margin: 14px;
    border: 0;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    width: 108px;
    height: 51px;
    border: 1px solid #55e4c2;
    opacity: 1;
    color: #55e4c2;
    border-radius: 8px;
    background-color: #ffffff;
  }

  .qq-before {
    margin: 14px;
    border: 0;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    width: 108px;
    height: 51px;
    border: 1px solid #f65151;
    background: #f65151;
    opacity: 1;
    color: #f65151;
    border-radius: 8px;
    background-color: #ffffff;
  }

  .baseAct .sure {
    margin-left: 0;
  }

  .left_arr,
  .right_arr,
  .optArea span {
    cursor: pointer;
  }

  .optArea {
    z-index: 100000;

    span {
      height: 50px;
      display: block;
    }
  }

  .arrow-l {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #f5f5f5 url(../../../static/img/arrow-right.png) no-repeat 0% 50%;
  }

  .item-r {
    position: absolute;
    top: 30px;
    left: 100%;
    width: 40px;
    height: 100px;
    cursor: pointer;
    background: #f5f5f5 url(../../../static/img/arrow-left1.png) no-repeat 0% 50%;
    background-size: 100% auto;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .arrow-l-top {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 10000000;
    width: 30px;
    height: 72px;
    right: 70px;
  }

  .arrow-l-right {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 10000000;
    width: 30px;
    height: 72px;
    opacity: 0.6;
    background: #f5f5f5 url(../../../static/img/arrow-left1.png) no-repeat 0% 50%;
  }

  .arrow-r {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0.6;
  }

  .menuCourseList {
    overflow: auto;
  }

  .course-con img {
    // position: fixed;
    // top: 50%;
    // left: 50%;
    width: auto !important;
    height: auto !important;
    //transform: translate(-50%,-50%);
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .namelist {
    max-height: 350px;
    overflow: auto;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .stopM {
    animation: rotate 3s linear infinite;
    animation-play-state: paused;
  }

  .playM {
    animation: rotate 3s linear infinite;
    animation-play-state: running;
  }

  .item-zan {
    img {
      margin-top: -60px;
      width: 66px;
      height: 66px;
    }
  }

  .item-bg {
    background-image: no-repeat;
    background-size: cover;
  }

  .item-all {
    padding: 15px;
    font-size: 18px;
  }

  .item-color {
    color: #fff;
    font-size: 22px;
  }

  .a_l,
  .a_r {
    bottom: 10px;
    // right: 10px;
  }

  .a_l {
    right: 110px;
  }

  .a_r {
    right: 20px;
  }

</style>
